<template>
  <div id="container">
    <div ref="chart" class="chart" />
  </div>
</template>
<script>
import * as echarts from 'echarts';
import { getWaybillCnt } from '@/common/api';
export default {
  props: {
    chartData: {
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      statusChart: '',
      text: 0,
      ing: '',
      aa: [
        {
          value: 1421,
          name: '待发运',
        },
        {
          value: 448,
          name: '在途',
        },
        {
          value: 2856,
          name: '已申请',
        },
        {
          value: 4972,
          name: '未开票',
        },
      ],
      proportion: '',
    };
  },
  created() {},
  computed: {},
  mounted() {
    getWaybillCnt().then((res) => {
      for (let i = 0; i < res.data.length; i++) {
        Number(res.data[i].num);
        if (res.data[i].SHIP_STATUS === 5) {
          res.data.splice(i, 1);
        } else if (res.data[i].SHIP_STATUS === 4) {
          this.ing = res.data[i].num;
        }
        this.aa[i].value = res.data[i].num;
        this.text += this.aa[i].value;
      }
      this.proportion = (this.ing / this.text) * 100;
      this.proportion = this.proportion.toFixed(1) + '%';

      this.initChart();
    });

    window.addEventListener('resize', () => {
      // 判断是否存在，直接调用resize方法
      if (this.statusChart) this.statusChart.resize();
    });
  },
  methods: {
    initChart() {
      this.statusChart = echarts.init(this.$refs.chart);
      const chartData = this.aa;
      const colorList = [
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#CA8CCA',
          },
          {
            offset: 1,
            color: '#EFA5BB',
          },
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#A4D37D',
          },
          {
            offset: 1,
            color: '#E5F2A7',
          },
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#BFA4E4',
          },
          {
            offset: 1,
            color: '#E29CE2',
          },
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#A8AAE5',
          },
          {
            offset: 1,
            color: '#BEA3E3',
          },
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'pink',
          },
          {
            offset: 1,
            color: 'red',
          },
        ]),
      ];
      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
      const gap = (1 * sum) / 100;
      const pieData1 = [];
      const pieData2 = [];
      const gapData = {
        name: '',
        value: gap,
        itemStyle: {
          color: 'transparent',
        },
      };
      for (let i = 0; i < chartData.length; i++) {
        pieData1.push({
          ...chartData[i],
          itemStyle: {
            borderRadius: 100,
            shadowColor: '#2a2a34',
            shadowBlur: 5,
            shadowOffsetY: 0,
            shadowOffsetX: 0,
            borderColor: '#2a2a34',
            borderWidth: 2,
          },
        });
        pieData1.push(gapData);

        pieData2.push({
          ...chartData[i],
          itemStyle: {
            borderRadius: 10,
            color: colorList[i],
            opacity: 0.1,
            shadowColor: '#000',
            shadowBlur: 1,
            shadowOffsetY: 5,
            shadowOffsetX: 0,
          },
        });
        pieData2.push(gapData);
      }

      let option = {
        title: [
          {
            // --------------
            text: this.proportion,
            x: '51%',
            y: '43%',
            textAlign: 'center',
            textStyle: {
              fontSize: 35,
              fontWeight: '500',
              color: '#BFA4E4',
              textAlign: 'center',
              textShadowColor: '#000',
              textShadowBlur: '1',
              textShadowOffsetX: 2,
              textShadowOffsetY: 2,
            },
          },
        ],
        tooltip: {
          trigger: 'item',
        },

        color: colorList,

        series: [
          {
            type: 'pie',
            z: 3,
            roundCap: true,
            radius: ['55%', '65%'],
            center: ['52%', '50%'],
            label: {
              color: '#fff',
              fontSize: 14,
            },
            labelLine: {
              length: 20, //第一条线
              length2: 10,
              lineStyle: {
                width: 2,
              },
            },

            data: pieData1,
          },
          {
            type: 'pie',
            z: 2,
            radius: ['60%', '70%'],
            center: ['52%', '50%'],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            silent: true,
            data: pieData2,
          },
        ],
      };
      this.statusChart.setOption(option);
    },
  },
  beforeDestroy() {},
};
</script>
<style scoped>
#container {
  height: 100%;
  display: flex;
  overflow: visible;
  flex-direction: column;
  justify-content: center;
  .chart {
    flex: 1;
    width: 100%;
    margin: 0 auto;
  }
}
</style>
